<template>
  <div class="main">
    <form id="login_form">
      <div class="headerContain">
        <h1>用户登录</h1>
        <span @click="goback" class="cha">X</span>
      </div>
      <div class="form-group">
        <label for="nickname">昵称</label>
        <input type="name" class="form-control" placeholder="Name" autofocus @change="inputName" :value="nameValue" @blur="blurName" id="nickname">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <!--<a class="pull-right" href="">忘记密码？</a>-->
        <input type="password" class="form-control" autofocus placeholder="Password" @change="inputPs" :value="psValue" @blur="blurPs" id="password">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox">记住我
        </label>
      </div>
      <button type="submit" class="btn btn-success btn-block" @click="login">登录</button>
    </form>
    <div class="message">
      <p>没有账号? <a href="http://localhost:8080/#/register">点击创建</a>.</p>
    </div>
  </div>
</template>

<script>
import '../../node_modules/bootstrap/dist/css/bootstrap.css'
import { mapState } from 'vuex'
export default {
  name: 'login',
  data () {
    return {}
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    inputName (e) {
      this.$store.commit('setInputName', e.target.value)
    },
    inputPs (e) {
      this.$store.commit('setInputPs', e.target.value)
    },
    blurName () {
      if (this.nameValue.trim().length <= 0 && this.loginStatus === 0) {
        this.$message({
          showClose: true,
          message: '昵称不能为空',
          type: 'warning'
        })
      }
    },
    blurPs () {
      if (this.psValue.trim().length <= 0 && this.loginStatus === 0) {
        this.$message({
          showClose: true,
          message: '请输入密码',
          type: 'warning'
        })
      }
    },
    getUserInfo () {
      this.axios.get('UserCrud/queryUserList').then(res => {
        console.log(res.data)
        this.$store.commit('initUserInfo', res.data)
      })
    },
    login () {
      this.$store.commit('showLogin')
      if (this.loginStatus === 0) {
        this.$message({
          showClose: true,
          message: '登录失败',
          type: 'error'
        })
      } else {
        this.$router.push({
          path: '/middle',
          query: {
            username: this.nameValue
          }
        })
        // this.$store.commit('clear')
      }
    },
    goback () {
      this.$router.go(-1)
    }
  },
  computed: {
    ...mapState(['nameValue', 'psValue', 'loginStatus'])
  }
}
</script>

<style scoped>

  .main {
    width: 340px;
    opacity: 0.8;
    margin: 0 auto;
    color: #333;
    position: absolute;
    left: 35%;
    z-index: 999;
  }

  .main .headerContain{
    text-align: center;
  }

  .main .headerContain h1 {
    font-size: 26px;
  }

  .main form {
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #d8dee2;
    border-radius: 5px;
    background-color: #fff;
  }

  .main .message {
    padding: 10px;
    padding-bottom: 0;
    border: 1px solid #d8dee2;
    border-radius: 5px;
  }
  h1{
    display: inline-block;
  }
  .cha{
    font-size: 20px;
    float: right;
    color: black;
    cursor: pointer;
  }
</style>
